<template>
  <div class="template2" :style="'padding:'+height+'px 0px 60px 0px;'">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">订单列表
          <span class="add" @click="outData">导出</span>
          <span class="add" @click="addOrder('add')">添加订单</span>
          
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="housesName">
             <el-autocomplete size="mini" style="width:150px;" :maxlength='10' class="inline-input" v-model="formInline.housesName" :fetch-suggestions="querySearch" placeholder="小区名称" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
          </el-form-item>
          <el-form-item prop="orderNo">
            <el-input size="mini" style="width:150px;" :maxlength='30' v-model="formInline.orderNo" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item prop="deliveryStatus">
            <el-select size="mini" style="width:100px;" v-model="formInline.deliveryStatus" placeholder="交付状况" clearable>
              <el-option label="精装" value="1"></el-option>
              <el-option label="毛坯" value="0"></el-option>
              <el-option label="其他" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="status">
            <el-select size="mini" style="width:90px;" v-model="formInline.status" placeholder="状态" clearable>
              <el-option label="待审核" value="1"></el-option>
              <el-option label="未派单" value="2"></el-option>
              <el-option label="已派单" value="3"></el-option>
              <el-option label="已完成" value="4"></el-option>
              <el-option label="已终止" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input size="mini" style="width:110px;" :maxlength='11' v-model="formInline.phone" placeholder="业主手机号"></el-input>
          </el-form-item>
          <el-form-item prop="adminName">
            <el-autocomplete size="mini" style="width:90px;" :maxlength='10' class="inline-input" v-model="formInline.adminName" :fetch-suggestions="querySearchAdmin" placeholder="管家姓名" :trigger-on-focus="false" @select="handleSelectA" ></el-autocomplete>
          </el-form-item>
          <el-form-item prop="getHomeDate">
            <el-date-picker size="mini" style="width:200px;" v-model="formInline.getHomeDate" type="daterange" clearable placeholder="交易时间" value-format="yyyy-MM-dd"  start-placeholder="开始日期"  end-placeholder="结束日期" > </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height: 100%;">
        <orderList></orderList>
      </el-main>
      <el-footer id="foot">
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" @size-change="sizeChange" :current-page="obj.page" @current-change="page" :total="listNum" :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </el-container>
    <addOrder></addOrder>
    <editOrder></editOrder>
    <setServerTime></setServerTime>
    <setButler></setButler>
    <setTimes></setTimes>
    <insertSheet></insertSheet>
  </div>
</template>
<script> 
import orderList from './orderList.vue' //订单列表
import addOrder from './addOrder.vue' //添加订单
import editOrder from './editOrder.vue' //编辑订单
import setButler from './setButler.vue' //更改服务管家
import setServerTime from './setServerTime.vue' //更改服务时间
import setTimes from './setTime.vue'   //更改收房时间
import insertSheet from './insertSheet.vue'   //插单
import { request,url } from "../../assets/request.js";
import {setTime} from "../../assets/session.js";
export default {
  data() {
    return {
      height: 0,
      formInline: {
        adminName:'', //管家姓名
        status:'',    //订单状态
        deliveryStatus:'',//交付状态
        housesName:'',//小区名称
        orderNo:'',//订单号
        getHomeDate:'',//收房日期
        phone:'',//业主手机号
      },
      listNum:0,
      obj:{
        page:1,
        size:20,
      },
      restaurants: [],  //所有楼盘
      admins:[],//所有平台用户
      adminId:'',
    };
  },
  created() {
    this.loadAll();
    this.adminAll();
    this.$root.$on("propertBank",data=>{
      this.listNum=data
    })
    this.$root.$emit("selectList",this.obj)
    this.$root.$on('page',data=>{
      if(data!='no'){ //判断页码是否要回到第一页
        this.obj=data
      }
    })

  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      let obj=this.dataCollation()
      this.$root.$emit('searchOrder',obj) 
    },
    dataCollation(){ //整理列表请求数据  和导出表格请求数据
      let obj=this.obj
      let formInline=this.formInline
      obj.adminName=formInline.adminName
      obj.status=formInline.status
      obj.deliveryStatus=formInline.deliveryStatus
      obj.housesName=formInline.housesName
      obj.orderNo=formInline.orderNo
      obj.phone=formInline.phone
      obj.page=1
      if(formInline.getHomeDate[0] && formInline.getHomeDate[1]){  //时间处理 判断是否已经选择时间
        obj.startHomeDate=setTime(formInline.getHomeDate[0])
        obj.endHomeDate=setTime(formInline.getHomeDate[1])
      }else{
        obj.startHomeDate=''
        obj.endHomeDate=''
      }
      return obj
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    outData(){ //导出 数据 订单列表数据
        let that=this 
        request.delAlert({
            name:'导出表格数据',
            that,
            fn(obj){
              let url ="toExcel";
              let params=that.dataCollation()
              let data=that.obj
              delete params.page
              delete params.size
              request.dowload({
                url,
                that,
                params,
                fn(res){
                  console.log(res)
                }
              })
            }
        })
    },
    page(e){ //页码
      // console.log(e)
      let obj=this.obj;
      obj.page=e
      this.$root.$emit('searchOrder',obj) 
    },
    sizeChange(e){ //每页数量
      let obj=this.obj;
      obj.size=e
      obj.page=1
      this.$root.$emit('searchOrder',obj)
    },
    addOrder(){ //添加订单
      if(!this.$store.state.property){
        this.loadAll();
      }
      this.$root.$emit('addOrder','add')
    },
    querySearch(queryString, cb) { //楼盘
      var restaurants = this.restaurants; 
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    handleSelect(item) { //选中小区名称
      let formInline=this.formInline
      formInline.housesName=item.name
      let url = "houses/unit/all";
      let that=this   //解决this指向问题
      let obj={
          housesId:item.id
      }
      request.ajaxGet({
        url,
        that,
        params:obj,
        fn(res){
          for(let i in res){
              for(let j in res[i].children){
                //   console.log(res[i].children[j])
                  res[i].children[j].label=res[i].children[j].label+'单元'
              }
          }
          that.pedestal=res
        }
      })
    },
    loadAll() { //查询所有楼盘
      let url = "houses/all";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          for(let i in res){
            res[i].value=res[i].name
          }
          that.restaurants=res
          that.$store.state.property=res
        }
      })
    },
    adminAll() { //查询所有平台员工
      let url = "admin";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          // console.log(res.list);
          let data=res.list;
          for(let i in data){
            data[i].value=data[i].realName
          }
          that.admins=data
        }
      })
    },
    querySearchAdmin(queryString, cb) { //所有员工筛选
      var restaurants = this.admins;
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    handleSelectA(item) { //选中员工
      let formInline=this.formInline
      this.adminId=item.id
      // formInline.adminName=item.id
    }
  },
  mounted() {
    let headH = document.getElementById("head1").offsetHeight;
    
    this.height=headH
  },
  components:{
    orderList,   //订单列表
    addOrder,    //添加订单
    editOrder,   //编辑订单
    setServerTime, //更改服务时间
    setButler,   //更改服务管家
    setTimes,    //更改收房时间
    insertSheet, //插单
  },
};
</script>
<style scoped lang="less">
@import "../template2.less";
</style>